import React, {useState, useEffect} from 'react';
import {PageHeader, Descriptions} from 'antd';
import axios from "axios";
import moment from 'moment'
import style from './NewsPrevView.module.scss'

export default function NewsPrevView(props) {
    const [newsInfo, setNewsInfo] = useState(null);

    useEffect(() => {
        // console.log(props.match.params.id)
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
            // console.log(res.data.content)
            setNewsInfo(res.data)
        })
    }, [props.match.params.id])

    // 审核状态列表
    const auditStateList = ['未审核', '审核中', '已通过', '未通过']
    // 发布状态列表
    const publishStateList = ['未发布', '待发布', '已发布', '已下线']
    // 状态样式列表
    const colorList = ['#FFA500', '#1890FF', '#2DB22D', '#FF4D4F']


    return (
        <div>
            {/* 防止刷新时，请求数据没回为空出错 */}
            {newsInfo && <div className={style.PageHeaderBox}>
                <PageHeader
                    ghost={true}
                    onBack={() => window.history.back()}   // => props.history.goBack()
                    title={newsInfo.title}
                    subTitle={newsInfo.category.title}
                >
                    <Descriptions size="small" column={2}>
                        <Descriptions.Item label="作者">{newsInfo.author}</Descriptions.Item>
                        <Descriptions.Item label="身份">{newsInfo.role.roleName}</Descriptions.Item>
                        <Descriptions.Item
                            label="创建时间">{moment(newsInfo.createTime).format('YYYY/MM/DD HH:mm:ss')}</Descriptions.Item>
                        <Descriptions.Item
                            label="发布时间">{newsInfo.publishTime ? moment(newsInfo.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}</Descriptions.Item>
                        <Descriptions.Item label="审核状态"
                                           contentStyle={{color: colorList[newsInfo.auditState]}}>{auditStateList[newsInfo.auditState]}</Descriptions.Item>
                        <Descriptions.Item label="发布状态"
                                           contentStyle={{color: colorList[newsInfo.publishState]}}>{publishStateList[newsInfo.publishState]}</Descriptions.Item>
                        <Descriptions.Item label="所在区域">{newsInfo.region ? newsInfo.region : '全球'}</Descriptions.Item>
                        <Descriptions.Item label="访问数量"
                                           contentStyle={{color: '#ff4500'}}>{newsInfo.view}</Descriptions.Item>
                        <Descriptions.Item label="点赞数量"
                                           contentStyle={{color: '#ff4500'}}>{newsInfo.star}</Descriptions.Item>
                        <Descriptions.Item label="评论数量" contentStyle={{color: '#ff4500'}}>0</Descriptions.Item>
                    </Descriptions>
                </PageHeader>
            </div>}
            <div className={style.myline}/>
            {/* 新闻内容 */}
            {newsInfo && <div className={style.NewsConent} dangerouslySetInnerHTML={{
                __html: newsInfo.content
            }}>
            </div>}
        </div>
    )
}